import './css/bg_gg.css'
import { Select } from 'antd';
import axios from 'axios';
import { Button, Tabs,Modal,DatePicker, Space  } from 'antd';
import React, { useState,useEffect} from 'react';
const { Option } = Select;
const { TabPane } = Tabs;

let Bg_gg = function(){
    const [visible, setVisible] = useState(false);
    const [data,setData] = useState([])
    const [data1,setData1] = useState([])
    const [val,setval] = useState('')
    const [val1,setval1] = useState('')
    function valchange(event){
        let str = event.target.value
       
        setval(str)
    }
    function valchange1(event){
        let str1 = event.target.value
       
        setval1(str1)
    }
    var state = {
        value: undefined,
    };
    function handleChange(value) {
        console.log(`selected ${value}`);
    }

    
    var onChange1 = value => {
        console.log(value,111);
        this.setState({ value });
    };

    useEffect(() => {
        const FetchData = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/announcement/index',{
                    type: 1,
                    page: 1,
                    limit: 15,
                }
                
            );
            setData(result.data.data.list);
            console.log(data);
        };
        FetchData();
    }, []);
    function ry(){
        const FetchData = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/admin/users/getUserList'
            );
            
            setData1(result.data.data)
        };
        FetchData();
        
        
    }
    
    function HandleChange(i){
        var i = i
        const FetchData = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/announcement/index',{
                    type: i,
                    page: 1,
                    limit: 15,
                }
            );
            setData(result.data.data.list)
            
        };
        FetchData();
        
    }
    function fbgg(){
        const FetchData = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/announcement/save',{
                    title: val,
                    content: val,
                    start_time:'' ,
                    end_time:'' ,
                }
            );
        };
        FetchData()
        window.location.reload();
    }
    console.log(data);
    console.log(data1);
    return(
        <div className='gg'>
            <div>
                <div className="new-wrap">
                    <Button><a type="primary" onClick={() =>{setVisible(true);ry()}}>新建任务</a></Button>
                </div>
                <Tabs defaultActiveKey="1" >
                    <TabPane tab="我的任务" key="1">
                        <div>
                            <span>公告状态</span>
                            <Select defaultValue="1" style={{ width: 120 }} onChange={HandleChange}>
                                {/* status */}
                                <Option value="1">公示中</Option>
                                <Option value="2">已结束</Option>
                            </Select>
                        </div>
                    </TabPane>
                </Tabs>
                
            </div>
            <div>
            {data.map((item,index)=>{
                return(
                    <div key={index} style={{marginBottom:30+'px'}}>
                        <div className='clearfix' >
                            <img alt="00" src={item.thumb_img}/>
                            <p style={{color:'#000'}}>{item.realname}</p><br></br>
                            <p>{item.create_time}</p>
                        </div>
                        <div>
                            <span style={{color:'#000'}}>{item.title}</span>
                            <p style={{color:'#000'}}>{item.content}</p>
                        </div>
                    </div>
                )
            })}
            </div>
            <div>
      
                <Modal
                    centered
                    visible={visible}
                    onOk={() => {setVisible(false);fbgg()}}
                    onCancel={() => setVisible(false)}
                    width={100+'%'}
                    height={100+'%'}
                >
                    <div className="cj">
                        <div>
                            <h2>新建公告</h2>
                            <div className='zt' style={{ width: '50%' ,float:'left'}}>
                                <p><span>*</span>公告标题</p>
                                <input style={{ width: '80%'}} placeholder='请输入内容' value={val} onChange={valchange} /><br></br>
                            </div>
                            <div className='cy'>
                                <p><span>*</span>通知本部门</p>
                                <Select
                                    mode="multiple"
                                    style={{ width: '45%' ,float:'left',margin:0}}
                                    placeholder="+添加"
                                    
                                    onChange={handleChange}
                                    optionLabelProp="label"
                                >
                                    {data1.map((item,index)=>{
                                        return(
                                            <Option key={index} value={item.realname} label={item.realname}>
                                            
                                            </Option>
                                        )
                                        
                                    })}
                                </Select>
                            </div>
                            <div className='ksjs clearfix'>
                            <div className='ks' style={{ width: '50%' ,float:'left',marginTop:20+'px'}}>
                                <p><span>*</span>开始时间</p>
                                <Space direction="vertical" size={12}>
                                    <DatePicker renderExtraFooter={() => 'extra footer'} showTime placeholder='请选择时间' onChange={onChange1}/>
                                </Space>
                            </div>
                            <div className='js' style={{ width: '45%' ,float:'left',marginTop:-68+'px'}}>
                                <p><span>*</span>结束时间</p>
                                <Space direction="vertical" size={12}>
                                    <DatePicker renderExtraFooter={() => 'extra footer'} showTime placeholder='请选择时间' />
                                </Space>
                        </div>
                        </div>
                            <div className='bz'>
                                <p><span>*</span>公告正文</p>
                                <textarea value={val1} onChange={valchange1}></textarea>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    )
}
export default Bg_gg